<template>
  <div style="margin-top: 20px">

    <el-form :inline="true" class="demo-form-inline" label-width="150px">
      <el-form-item v-if="isme" label="选择抖音账号：">
        <el-button size="" type="primary" @click="chooseAccounts()">选择</el-button>
      </el-form-item>
      <el-form-item v-else label="选择抖音@账号：">
        <el-button size="" type="primary" @click="chooseAccounts()">选择</el-button>
      </el-form-item>

      <el-form-item label="">
        <el-checkbox-group v-model="value" size="medium">
          <el-checkbox v-for="item in accounts" :key="item" disabled checked :label="item">{{ item }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialog"
      top="1vh"
      width="50%"
      :before-close="cancel"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-row :gutter="20">

        <el-form-item label="选择任务编号：">
          <el-input
            v-model="query['keyword']"
            class="filter-item"
            style="width:200px;"
            placeholder="任务编号"
            clearable
          />
          <el-button class="filter-item" type="primary" @click="search()">查询</el-button>
        </el-form-item>

        <div v-if="isyjsx">

          <!-- 列表 -->
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="datas"
            :height="height"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
          >
            >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="任务编号" min-width="100" sortable="custom" />
            <el-table-column prop="nickname" label="昵称" min-width="100" sortable="custom" />
            <el-table-column
              prop="account_id"
              label="账号id"
              min-width="100"
              sortable="custom"
              show-overflow-tooltip
            />
            <el-table-column
              prop="comment"
              label="评论"
              min-width="100"
              sortable="custom"
              show-overflow-tooltip
            />
            <el-table-column label="是否被私信" min-width="160" align="right" fixed="right">
              <template slot-scope="{ row }">
                <div v-if="row.is_use === 1">
                  <el-tag size="medium">是</el-tag>
                </div>
                <div v-if="row.is_use === 0">
                  <el-tag size="medium">否</el-tag>
                </div>
              </template>
            </el-table-column>

            <!--
      <el-table-column prop="create_time" label="时间" min-width="100" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="works_num" label="作品数" min-width="100" sortable="custom" />
      <el-table-column prop="supports_num" label="获赞数" min-width="100" sortable="custom" />
      <el-table-column prop="concerns_num" label="关注数" min-width="105" sortable="custom" />
      <el-table-column prop="fans_num" label="粉丝数" min-width="105" sortable="custom" />
      <el-table-column prop="like_num" label="喜欢" min-width="105" sortable="custom" />
      -->

          </el-table>
        </div>
        <div v-else>
          <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="datas"
            :height="height"
            style="width: 100%"
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="任务编号" min-width="100" sortable="custom" />
            <el-table-column prop="nickname" label="昵称" min-width="100" sortable="custom" />
            <el-table-column
              prop="account_id"
              label="账号id"
              min-width="100"
              sortable="custom"
              show-overflow-tooltip
            />
            <el-table-column
              prop="comment"
              label="评论"
              min-width="100"
              sortable="custom"
              show-overflow-tooltip
            />

            <!--
        <el-table-column prop="create_time" label="时间" min-width="100" sortable="custom" show-overflow-tooltip />
        <el-table-column prop="works_num" label="作品数" min-width="100" sortable="custom" />
        <el-table-column prop="supports_num" label="获赞数" min-width="100" sortable="custom" />
        <el-table-column prop="concerns_num" label="关注数" min-width="105" sortable="custom" />
        <el-table-column prop="fans_num" label="粉丝数" min-width="105" sortable="custom" />
        <el-table-column prop="like_num" label="喜欢" min-width="105" sortable="custom" />
        -->

          </el-table>
        </div>

        <!-- 分页 -->
        <pagination
          v-show="count > 0"
          :total="count"
          :page.sync="query.page"
          :limit.sync="query['page_size']"
          @pagination="lists"
        />
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="22">
          <el-button class="filter-item" type="primary" @click="save()">保存</el-button>
        </el-col>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
import {
  list
} from '@/api/admin/task-sjpq.js'
import pagination from '@/components/Pagination'

export default {
  name: 'AccountSelect',
  components: {
    pagination
  },
  props: {
    selected: {
      type: Array,
      default: () => ([{
        a: 1
      },
      {
        b: 2
      }
      ])
    },
    isme: {
      type: Boolean,
      default: () => (
        false
      )
    },
    isyjsx: {
      type: Boolean,
      default: () => (
        false
      )
    }
  },

  data() {
    return {
      dialogTitle: '选择账号',
      dialog: false,

      loading: false,
      datas: [],
      height: 550,

      count: 0,
      query: {
        'field': 'task_code',
        'keyword': '',
        page: 1,
        'page_size': 10
      },

      accounts: [],
      value: [],
      multipleSelection: []
    }
  },
  created() {
    console.log(this.isyjsx)
    if (this.isyjsx) {
      this.query.type = 'yjsx'
    }
    this.lists()
  },
  methods: {
    search() {
      this.lists()
    },
    chooseAccounts() {
      if (this.isme) {
        this.accounts = []
      }
      this.dialog = true
    },
    handleSizeChange(e) {
      console.log(123)
    },
    handleCurrentChange(e) {
      console.log(123)
    },
    cancel() {
      this.dialog = false
    },
    handleSelectionChange(val) {
      if (this.isme) {
        this.multipleSelection = []
        if (val.length <= 1 && this.multipleSelection.length <= 1) {
          this.multipleSelection = val
        } else {
          val.forEach(row => {
            if (val[0]['account_id'] === row['account_id']) {
              this.$refs.multipleTable.toggleRowSelection(row)
            }
          })
          this.$message.error('你选择的账号不能超过一个！')
        }
      } else {
        console.log(val)
        this.multipleSelection = val
      }
      console.log('mult:', this.multipleSelection)
      console.log('val:', val)
    },

    save() {
      this.multipleSelection.forEach((v) => {
        if (this.accounts.indexOf(v['account_id']) === -1) {
          this.$refs.multipleTable.toggleRowSelection(v, false)
          this.accounts.push(v['account_id'])
        }
      })
      console.log(this.accounts)
      this.query.page = 1
      this.$emit('accountSelectEvent', this.accounts)
      this.multipleSelection = []
      this.lists()
      this.dialog = false
    },
    // 列表
    lists() {
      this.loading = true

      list(this.query).then(res => {
        this.datas = res.data.list
        this.count = res.data.page_total * this.query['page_size']
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style>
</style>
